<template>
    <view id="aaa">
        <View class="comListNum">待认领的数据（{{ roldList.length }}）</View>
        <View class="listItem">
            <View class="item">
                <View class="itemCom" v-for="(item, index) in roldList">
                    <View class="itemLeft" @click="changeShow(item)">
                        <View class="yuan" v-if="item.show === false"></View>
                        <image
                            v-if="item.show === true"
                            style="width: 24px; height: 24px; margin-right: 10px"
                            src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/showChange.png"
                        ></image>
                        <label class="weightNum">{{ item.weight }}kg</label>
                    </View>
                    <View class="weightDate"> {{ item.weightTime }} </View>
                </View>
            </View>
        </View>
        <View class="foother">
            <View class="yuan" @click="allShow()" v-if="show === true"></View>
            <image
                @click="allShow()"
                v-if="show === false"
                style="width: 24px; height: 24px; margin-right: 10px"
                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/showChange.png"
            ></image>
            <View class="allChange" @click="allShow()">全选</View>
            <View class="showNo" @click="hideList(2)">忽略</View>
            <View class="showYes" @click="hideList(1)">认领</View>
        </View>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
    data() {
        return {
            roldList: [],
            show: true,
        };
    },
    computed: {
        ...mapState(["connectDeviceId"]),
    },
    onLoad() {
        this.listNum();
    },
    methods: {
        async hideList(type) {
            let ids = [];
            this.roldList.map((item) => {
                if (item.show === true) {
                    ids.push(item.id);
                }
            });
            const { data } = await this.request.httpTokenJsonRequest(
                "/mp-api/wx/deviceRecord/update",
                { ids, status: type },
                "POST",
            );
            this.listNum();
        },

        allShow() {
            this.roldList.map((list) => {
                if (this.show === true) {
                    list.show = true;
                } else {
                    list.show = false;
                }
            });
            this.show = !this.show;
        },
        changeShow(item) {
            this.roldList.map((list) => {
                if (list.id == item.id) {
                    list.show = !list.show;
                }
            });
        },
        async listNum() {
            const { data } = await this.request.httpTokenRequest(`/mp-api/wx/deviceRecord/list`, "GET");
            data.length &&
                data.map((item) => {
                    item.show = false;
                });
            this.roldList = data || {};
        },
    },
};
</script>

<style lang="less" scoped>

.comListNum {
    padding-left: 15px;
    height: 22px;
    font-size: 16px;
    font-weight: 500;
    color: #234941;
    line-height: 22px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.listItem {
    width: 100%;
    overflow-y: auto;
    height: calc(100vh - 130px);
    background: #ffffff;
    // border: 1px solid #ffffff;
    border-radius: 20px 20px 0 0;
}
.item {
    padding-left: 15px;
    padding-right: 15px;
    // margin-bottom: 100px;
}
.itemCom {
    display: flex;
    flex-direction: row;
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f7f7f7;
}
.itemLeft {
    display: flex;
    flex-direction: row;
    flex: 1;
    align-items: center;
}
.yuan {
    width: 24px;
    height: 24px;
    opacity: 0.3;
    border: 1px solid #000000;
    border-radius: 50%;
    margin-right: 10px;
}
.weightNum {
    height: 22px;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    line-height: 22px;
}
.weightDate {
    height: 20px;
    font-size: 14px;

    font-weight: 400;
    color: #999999;
    line-height: 20px;
}
.foother {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    flex: 1;
    right: 0;
    flex-direction: row;
    padding-bottom: 41px;
    background-color: #ffffff;
    padding-left: 15px;
    padding-right: 15px;
    align-items: center;
    padding-top: 7px;
}
.showNo {
    width: 110px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #cccccc;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    margin-right: 15px;
}
.showYes {
    width: 110px;
    height: 40px;
    background: linear-gradient(180deg, #46c09e 0%, #156d4f 100%);
    box-shadow: 0px 12px 24px 0px rgba(55, 168, 148, 0.2);
    border-radius: 12px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}
.allChange {
    display: flex;
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    line-height: 22px;
}
</style>
